<template>
	<view class="" style="width: 100vw;height: 100vh">
		<view class="content" :style="{'background':kbackgroundColor2}" style="min-height: 100vh">
			<hx-navbar title="添加银行卡" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
				transparent="auto">
			</hx-navbar>
			<view class="container" v-if="userinfo.idNumber=='' || userinfo.idNumber==null">
				<view class="content" :style="{'color':knormalColor}">
					<view class="item item-border">
						<text class="title">账户性质</text>
						<view class="sel-view">
							<uni-data-select style="width: 100%;" v-model="natureValue" :localdata="natureList"
								@change="change"></uni-data-select>
						</view>
						<!-- <input class="input-view" placeholder="请输入持卡人姓名" /> -->
					</view>
					<view class="" v-if="natureValue==1">
						<view class="item item-border">
							<text class="title">持卡人</text>
							<input class="input-view" v-model="realName" placeholder="请输入持卡人姓名" />
						</view>
						<view class="item item-border">
							<text class="title">身份证号</text>
							<input class="input-view" v-model="idNumber" placeholder="请输入持卡人身份证" />
						</view>
					</view>
					<view class="" v-if='natureValue==2'>
						<view class="item item-border">
							<text class="title">银行开户名:</text>
							<!-- realName -->
							<text v-if="userinfo.realName!=''" class="view-name">{{userinfo.realName}}</text>
							<input v-else v-model='realName' class="input-view" placeholder="请输入企业账户名称" />
						</view>
						<view class="item item-border">
							<text class="title">银行卡号:</text>
							<input v-model="cardNumber" class="input-view" placeholder="请输入对公账户号" />
						</view>
					</view>
					<view class="item item-border" v-if='natureValue==1'>
						<text class="title">银行卡号:</text>
						<input class="input-view" v-model="cardNumber" placeholder="请输入银行卡号" />
					</view>
					<view class="item item-border" v-if="natureValue==1">
						<text class="title">预留手机号</text>
						<input class="input-view" v-model="phone" placeholder="请输入银行预留手机号" />
					</view>
					<view class="item item-border" style="display: none;">
						<text class="title">所属银行 </text>
						<view class="sel-view">
							<uni-data-select style="width: 100%;" v-model="dictVal" :localdata="formattedOptions"
								@change="bankchange"></uni-data-select>
						</view>
						<!-- <input class="input-view" placeholder="请输入持卡人姓名" /> -->
					</view>


				</view>
			</view>
			<view class="container" v-else>
				<view class="content" :style="{'color':knormalColor}">

					<view class="">
						<view class="item item-border">
							<text class="title">持卡人</text>
							<text class="view-name"> {{userinfo.realName}}</text>

						</view>
						<view class="item item-border">
							<text class="title">身份证号</text>
							<text class="view-name">{{userinfo.idNumber}}</text>
						</view>
					</view>
					<view class="" v-if='natureValue==2'>
						<view class="item item-border">
							<text class="title">银行开户名:</text>
							<input v-model='realName' class="input-view" placeholder="请输入企业账户名称" />
						</view>
						<view class="item item-border">
							<text class="title">银行卡号:</text>
							<input v-model="cardNumber" class="input-view" placeholder="请输入对公账户号" />
						</view>
					</view>
					<view class="item item-border" v-if='natureValue==1'>
						<text class="title">银行卡号:</text>
						<input class="input-view" v-model="cardNumber" placeholder="请输入银行卡号" />
					</view>
					<view class="item item-border" v-if="natureValue==1">
						<text class="title">预留手机号</text>
						<input class="input-view" v-model="phone" placeholder="请输入银行预留手机号" />
					</view>
					<view class="item item-border" style="display: none;">
						<text class="title">所属银行 </text>
						<view class="sel-view">
							<uni-data-select style="width: 100%;" v-model="dictVal" :localdata="formattedOptions"
								@change="bankchange"></uni-data-select>
						</view>
						<!-- <input class="input-view" placeholder="请输入持卡人姓名" /> -->
					</view>


				</view>
			</view>
			<view class="container">
				<view class="content" :style="{'color':knormalColor}">
					<view class="item item-border-none">
						<text class="title">设为默认提现银行卡</text>
						<view class=" " style="	margin-left: auto;">
							<!--  v-if="ktheme =='black'"  -->
							<switch @change="switch1Change" :checked='tacit' :color="kselectColorSize"
								style="transform:scale(0.7)" />
						</view>
					</view>
				</view>
			</view>
			<view class="bottom_box">
				<view class="submit_btn" :style="{'background':kbuttonBgColor}" @click="withdrawCash()"
					disabled='submitStatus'>
					确认添加
				</view>
				<!-- :loading='submitStatus'	<view class=" submit_btn2" v-else-if="!isSubmit" disabled>
				确认添加
			</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: {},
				tacit: false,
				dictBankList: [],
				dictVal: "",
				idNumber: '',
				realName: '',
				bankName: '',
				bankOpen: "",
				cardNumber: '',
				phone: "",
				bankCode: '',
				isSubmit: false,
				natureValue: 1,
				natureList: [{
						value: 1,
						text: "个人账号"
					},
					{
						value: 2,
						text: "公司账号"
					},
				],
			}
		},

		computed: {
			formattedOptions() {
				// 假设 uni-data-select 需要一个 { value, label } 格式的数组  
				return this.dictBankList.map(item => ({
					value: item.bankCode,
					text: item.bankName, // 或者使用 item.name 或其他属性名，取决于 uni-data-select 的需求  
				}));
			},
		},
		onShow() {
			this.getRealName()
			this.getDictBank()
		},

		methods: {
			getRealName() {
				this.$api.getRealName(res => {
					if (res.status) {
						this.userinfo = res.data.data
						if (this.userinfo.idNumber == '' || this.userinfo.idNumber == null) {
							this.natureValue = 2
						}
					} else {
						this.$common.errorToShow(res.message)
					}

				})
			},
			//获取银行信息
			getDictBank() {
				this.$api.getDictBank(res => {
					if (res.status) {
						console.log("获取--", res);
						this.dictBankList = res.data
					} else {
						this.$common.errorToShow(res.message)
					}

				})

			},
			//手机号验证
			validateMobile(phone) {
				const re = /^1(3|4|5|7|8|9|6)\d{9}$/
				return re.test(phone);
			},
			//身份验证
			validentity(identity) {
				var sf = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X|x)$/
				return sf.test(identity);
			},
			valname(name) {
				var nm = /^[A-Za-z\s.-]+$/
				return nm.test(name);

			},
			withdrawCash() {

				if (this.userinfo.realName !=null) {
					this.realName = this.userinfo.realName
				}
				if (this.userinfo.idNumber !=null) {
					this.idNumber = this.userinfo.idNumber
					console.log("--	this.idNumber1111 ", this.idNumber);
				}


				if (this.natureValue == 1) {
					console.log("this.realName00000", this.idNumber);
					if (this.realName == '') {
						this.$common.errorToShow('请输入持卡人姓名')
						return false
					} else if (this.idNumber == '') {
						this.$common.errorToShow('请输入身份证信息')
						console.log("--	this.idNumber ", this.idNumber);
					} else if (!this.validentity(this.idNumber)) {
						this.$common.errorToShow('身份证信息填写不正确')
					} else if (this.cardNumber == '') {
						this.$common.errorToShow('请输入银行卡号')
					}  else if (this.phone == '') {
						this.$common.errorToShow('请输入银行预留手机号')
					} else if (!this.validateMobile(this.phone)) {
						this.$common.errorToShow('手机号格式不正确');
					} else {
						this.getCardNo()

					}
				} else if (this.natureValue == 2) {
					if (this.realName == '') {
						this.$common.errorToShow('请输入企业账户名称')
						return false
					} else if (this.cardNumber == '') {
						this.$common.errorToShow('请输入银行卡号')
					}   else {
						this.getCardNo()

					}
				}
			},
			getCardNo() {
				//获取银行code
				var _this = this
				let token = this.$db.get('userToken')
				uni.request({
					//url: '/api/validateAndCacheCardInfo.json?cardNo=' + this.cardNumber + '&cardBinCheck=true', //本地
					url: 'https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo=' + this.cardNumber +
						'&cardBinCheck=true', //线上
					method: 'GET',
					success: (res) => {
						if (res.data.validated) {
							_this.bankCode = res.data.bank
							_this.dictVal = _this.bankCode
							_this.dictBankList.filter(res => {
								if (res.bankCode == _this.dictVal) {
									this.bankName = res.bankName
								}
							})
							this.addSaveCard()
						} else {
							this.$common.errorToShow('请检查卡号是否输入正确')
						}

					}
				});
			},

			addSaveCard() {
				var tacits = 1
				//1 否 2是
				if (this.tacit) {
					tacits = 2
				} else {
					tacits = 1
				}
				var data = {
					tacit: tacits,
					idNumber: this.idNumber, //身份证
					type: this.natureValue, //类型
					realName: this.realName, //持卡、企业名称
					cardNumber: this.cardNumber, //银行卡号
					bankOpen: this.bankName, //输入
					bankName: this.bankName, //开户行名称 自动
					bankCode: this.bankCode, //银行code
					phone: this.phone, //手机号

				}

				this.$api.addSaveCard(data, res => {
					if (res.status) {
						this.$common.errorToShow("添加成功")
						uni.redirectTo({
							url: '/pages/user/wallet/mine-bank-list'
						})
					} else {
						this.$common.errorToShow(res.message)
					}

				})
			},
			bankchange(e) {
				console.log("e----", e);
			},
			change(e) {
				this.natureValue = e
				console.log("e:", e);
			},
			switch1Change(e) {
				this.tacit = !this.tacit
				console.log("sw--", this.tacit);
			}
		},
	}
</script>

<style lang="scss" scoped>
	.body {
		width: 100vw;
		height: 100vh;
	}

	.container {
		margin: 40rpx 40rpx 0 40rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;

		.content {
			// margin-top: 40rpx;
			// margin-bottom: 40rpx;
			display: flex;
			flex-direction: column;

			// padding: 0 40rpx;
			.item-border {
				// border-bottom: 2rpx solid #535353;
			}

			.item-border-none {
				// border-bottom: 0rpx solid #535353;
			}

			.item {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin: 0 28rpx;
				padding: 20rpx 0;
				font-size: 26rpx;

				.title {
					// margin-top: 10rpx;
				}

				.view-name {
					width: 382rpx;
					text-align: right;
					padding: 6rpx 15rpx;
					color: #a1a0a0;
				}

				.input-view {
					width: 382rpx;
					border-radius: 4rpx;
					border: 2px solid #a1a0a0;
					margin-left: auto;
					padding: 6rpx 15rpx;
					color: #a1a0a0;
					// text-align: right;
				}

				.sel-view {
					font-size: 29rpx;
					width: 416rpx;
					padding: 0;
					border-radius: 4rpx;
					color: #727070;
					margin-left: auto;
					border: 2px solid #a1a0a0;
				}
			}
		}
	}

	.bottom_box {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 100rpx;
		width: 100%;

		.submit_btn {
			width: 280rpx;
			height: 88rpx;
			line-height: 88rpx;
			color: white;
			text-align: center;
			border-radius: 50rpx;
		}

		.submit_btn2 {
			width: 280rpx;
			height: 88rpx;
			border: 1rpx solid #d9d9d9;
			color: #999;
			line-height: 88rpx;
			text-align: center;
			border-radius: 50rpx;
		}
	}

	.container-purple {
		background-color: #ffffff;
	}

	.container-black {
		background-color: #1B1B1B;
	}

	/deep/.uni-select__input-placeholder .uni-select__input-text {
		color: #727070;
		font-size: 29rpx;
	}

	/deep/.uni-select__input-text {
		color: #727070;
		padding: 0;
		font-size: 29rpx;
	}

	/deep/.uni-select__selector {
		background-color: #ffffff;
		color: #a1a0a0;
	}
</style>